<!-- tab style -->
<style type="text/css">
#tabs { font-size:10pt; font-weight:bold; margin: 0 0 10px 0; }
#tabs ul li { float:left; margin: 0 10px 0 0; height: 20px; overflow: hidden; display: inline; inline-height: 20px; }
#tabs ul li a { display:block; padding:0 5px; text-decoration:none; }
</style>

<div id="tabs">
  <ul>
    {% for rest in rests %}
    <li><a class="rest-title" href="javascript:void(0)">{{ rest.name }}</a></li>
    {% endfor %}
    <li><a class="rest-add-title" href="javascript:void(0)">新餐馆</a></li>
  </ul>
</div>

<br />

<div id="menu-list">
  <p>在这里增加餐馆和菜单</p>
</div>

<script type="text/javascript">
<!-- //
function menu_list(rname){

}

$(".rest-title").click(function(){
    $("#menu-list").html("Loading ...");
    var rname = $(this).text();
    $("#tabs a").css("text-decoration", "none");
    $(this).css("text-decoration", "underline");
    
    $.get("/admin/menu/"+rname,
    function(data){
        $("#menu-list").html(data);
    });    
});

$(".rest-add-title").click(function(){
    $("#menu-list").html("Loadding ...");
    $("#tabs a").css("text-decoration", "none");
    $(this).css("text-decoration", "underline");
    
    $.get("/admin/rest/add", function(data){
        $("#menu-list").html(data);
    });    
});
// -->
</script>
